<template>
  <div>
    <el-table :data="tableDataProcessed" style="width: 100%">
      <el-table-column prop="powerType" label="发电类型" width="100"></el-table-column>
      <el-table-column v-for="time in timeNames" :key="time" :prop="time" :label="time" width="100">
        <template #default="{ row }">
          {{ row[time] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue';

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
});

const tableDataProcessed = ref([]);
const timeNames = ref([]);
const processTableData = () => {
  // 提取所有时间点
  timeNames.value = new Set(props.tableData.map(item => item.timeName));

  // 初始化结果数据结构
  const powerTypes = [
    {label: '水电', key: 'hydroPowerValue'},
    {label: '风电', key: 'windPowerValue'},
    {label: '光电', key: 'pvPowerValue'},
    {label: '核电', key: 'nuclearPowerValue'},
    {label: '其他', key: 'otherPowerValue'},
    {label: '总量', key: 'newEnergyPowerValue'}
  ];

  // 构建表格数据
  tableDataProcessed.value = powerTypes.map(powerType => {
    const row = {powerType: powerType.label};
    timeNames.value.forEach(timeName => {
      const value = props.tableData.find(item => item.timeName === timeName)[powerType.key] || 0;
      row[timeName] = value;
    });
    return row;
  });

  // 调试信息
  console.log('Processed Table Data:', tableDataProcessed.value);
};

// 监听 props.tableData 的变化
watch(
    () => props.tableData,
    (newVal) => {
      tableDataProcessed.value = [];
      if (newVal.length > 0) {
        console.log(newVal);
        processTableData();
      }
    },
    {immediate: true, deep: true} // 立即执行一次
);
</script>

<style lang="scss" scoped></style>